<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>ES6 | 一只老鸟</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/img/rty-docs.ico">
    <script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-145250139-1"></script>
    <script>window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-145250139-1');</script>
    <script>var _hmt = _hmt || [];
      (function() {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?96bef00c01d8ee7ee249abc380b9e5ab";
        var s = document.getElementsByTagName("script")[0]; 
        s.parentNode.insertBefore(hm, s);
      })();</script>
    <meta name="description" content="Welcome to my docs">
    <meta name="keywords" content="jkx,晋凯旋,jkxxmd,vue,js,html,css,英文歌曲,bruno">
    
    <link rel="preload" href="/assets/css/0.styles.eb327ba5.css" as="style"><link rel="preload" href="/assets/js/app.2b0e3d52.js" as="script"><link rel="preload" href="/assets/js/2.87232f21.js" as="script"><link rel="preload" href="/assets/js/83.604f41d2.js" as="script"><link rel="prefetch" href="/assets/js/10.1e2b3af9.js"><link rel="prefetch" href="/assets/js/11.bfd5eea1.js"><link rel="prefetch" href="/assets/js/12.11b2a8d0.js"><link rel="prefetch" href="/assets/js/13.d230b1b6.js"><link rel="prefetch" href="/assets/js/14.8208356f.js"><link rel="prefetch" href="/assets/js/15.badc1e67.js"><link rel="prefetch" href="/assets/js/16.76e6aeba.js"><link rel="prefetch" href="/assets/js/17.ea4ddef2.js"><link rel="prefetch" href="/assets/js/18.e3d36bd1.js"><link rel="prefetch" href="/assets/js/19.aa1bac84.js"><link rel="prefetch" href="/assets/js/20.838765cd.js"><link rel="prefetch" href="/assets/js/21.14466225.js"><link rel="prefetch" href="/assets/js/22.38392bba.js"><link rel="prefetch" href="/assets/js/23.71895fbc.js"><link rel="prefetch" href="/assets/js/24.766c8a49.js"><link rel="prefetch" href="/assets/js/25.6b02ff9f.js"><link rel="prefetch" href="/assets/js/26.ef22337a.js"><link rel="prefetch" href="/assets/js/27.0334ed21.js"><link rel="prefetch" href="/assets/js/28.811fb438.js"><link rel="prefetch" href="/assets/js/29.f687b8ad.js"><link rel="prefetch" href="/assets/js/3.3fc78177.js"><link rel="prefetch" href="/assets/js/30.0eef1a68.js"><link rel="prefetch" href="/assets/js/31.44dad2fc.js"><link rel="prefetch" href="/assets/js/32.959ca33d.js"><link rel="prefetch" href="/assets/js/33.d27370cb.js"><link rel="prefetch" href="/assets/js/34.73319d5f.js"><link rel="prefetch" href="/assets/js/35.09513538.js"><link rel="prefetch" href="/assets/js/36.c77663c8.js"><link rel="prefetch" href="/assets/js/37.89852ede.js"><link rel="prefetch" href="/assets/js/38.a9026d97.js"><link rel="prefetch" href="/assets/js/39.2cb07eac.js"><link rel="prefetch" href="/assets/js/4.50419328.js"><link rel="prefetch" href="/assets/js/40.7694c8be.js"><link rel="prefetch" href="/assets/js/41.0b071795.js"><link rel="prefetch" href="/assets/js/42.731a77fd.js"><link rel="prefetch" href="/assets/js/43.e340c04a.js"><link rel="prefetch" href="/assets/js/44.32723933.js"><link rel="prefetch" href="/assets/js/45.fddbc294.js"><link rel="prefetch" href="/assets/js/46.7227ca9a.js"><link rel="prefetch" href="/assets/js/47.e445b894.js"><link rel="prefetch" href="/assets/js/48.22f08eaa.js"><link rel="prefetch" href="/assets/js/49.1ee7be95.js"><link rel="prefetch" href="/assets/js/5.f4c7dd9b.js"><link rel="prefetch" href="/assets/js/50.620525ff.js"><link rel="prefetch" href="/assets/js/51.23ef9c37.js"><link rel="prefetch" href="/assets/js/52.ab599220.js"><link rel="prefetch" href="/assets/js/53.6f0a5a12.js"><link rel="prefetch" href="/assets/js/54.0af9ce80.js"><link rel="prefetch" href="/assets/js/55.9a619ce4.js"><link rel="prefetch" href="/assets/js/56.d3eb58e2.js"><link rel="prefetch" href="/assets/js/57.cec694aa.js"><link rel="prefetch" href="/assets/js/58.215ff512.js"><link rel="prefetch" href="/assets/js/59.67b4a2d9.js"><link rel="prefetch" href="/assets/js/6.35564b30.js"><link rel="prefetch" href="/assets/js/60.10fa328d.js"><link rel="prefetch" href="/assets/js/61.eb384a7b.js"><link rel="prefetch" href="/assets/js/62.21995735.js"><link rel="prefetch" href="/assets/js/63.d3376937.js"><link rel="prefetch" href="/assets/js/64.9dc17e46.js"><link rel="prefetch" href="/assets/js/65.faaf4be5.js"><link rel="prefetch" href="/assets/js/66.82d4fd2e.js"><link rel="prefetch" href="/assets/js/67.766e8bbb.js"><link rel="prefetch" href="/assets/js/68.e00a5e5f.js"><link rel="prefetch" href="/assets/js/69.0f9198d3.js"><link rel="prefetch" href="/assets/js/7.826495ef.js"><link rel="prefetch" href="/assets/js/70.05ef2cdd.js"><link rel="prefetch" href="/assets/js/71.0da0e95b.js"><link rel="prefetch" href="/assets/js/72.fd1cda42.js"><link rel="prefetch" href="/assets/js/73.907aa3c6.js"><link rel="prefetch" href="/assets/js/74.dec02a91.js"><link rel="prefetch" href="/assets/js/75.8610ce53.js"><link rel="prefetch" href="/assets/js/76.db9000c6.js"><link rel="prefetch" href="/assets/js/77.fa0311a2.js"><link rel="prefetch" href="/assets/js/78.33ae2bd0.js"><link rel="prefetch" href="/assets/js/79.879fa638.js"><link rel="prefetch" href="/assets/js/8.7a30ba0c.js"><link rel="prefetch" href="/assets/js/80.898b981f.js"><link rel="prefetch" href="/assets/js/81.b606e1f8.js"><link rel="prefetch" href="/assets/js/82.5006eb1e.js"><link rel="prefetch" href="/assets/js/84.2e649063.js"><link rel="prefetch" href="/assets/js/85.50f34442.js"><link rel="prefetch" href="/assets/js/86.aee7b865.js"><link rel="prefetch" href="/assets/js/87.9b812977.js"><link rel="prefetch" href="/assets/js/88.52e08a6c.js"><link rel="prefetch" href="/assets/js/9.7b6af510.js">
    <link rel="stylesheet" href="/assets/css/0.styles.eb327ba5.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">一只老鸟</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/components/introduction.html" class="nav-link">
  VUE
</a></div><div class="nav-item"><a href="/english/introduction.html" class="nav-link">
  Javascript
</a></div><div class="nav-item"><a href="/music/introduction.html" class="nav-link">
  Html5
</a></div><div class="nav-item"><a href="/oral/introduction.html" class="nav-link">
  CSS
</a></div> <a href="https://github.com/jgsrty/jgsrty.github.docs" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><a href="/oral/introduction.html" class="sidebar-link">伪类</a></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>英语口语短文</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/oral/essay/Describe a type of transport you like the most.html" class="active sidebar-link">ES6</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#变量" class="sidebar-link">变量：</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#_1-let声明" class="sidebar-link">1.let声明</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#const" class="sidebar-link">const</a></li></ul></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#模板字符串" class="sidebar-link">模板字符串</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#字符串实例方法" class="sidebar-link">字符串实例方法</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#数字方法" class="sidebar-link">数字方法</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#数组的扩展" class="sidebar-link">数组的扩展</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#对象的扩展" class="sidebar-link">对象的扩展</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#es6设置默认值" class="sidebar-link">ES6设置默认值</a></li></ul></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#箭头函数" class="sidebar-link">箭头函数</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#proxy-代理" class="sidebar-link">Proxy 代理</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#_1-拦截行为-get" class="sidebar-link">1.拦截行为 get</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#_2-set方法-拦截某个属性的赋值操作" class="sidebar-link">2. set方法  拦截某个属性的赋值操作</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#_3-拦截行为apply-目标函数-this-目标函数的实参列表" class="sidebar-link">3.拦截行为apply(目标函数，this，目标函数的实参列表){</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#_4-has拦截hasproperty操作-检测以-开头的属性" class="sidebar-link">4.has拦截HasProperty操作,检测以_开头的属性</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#_5-拦截行为-defineproperty" class="sidebar-link">5.拦截行为 defineProperty</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#_6-拦截行为-deleteproperty-t-p" class="sidebar-link">6.拦截行为 deleteProperty（t，p）{</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#_7-拦截行为-getownpropertydescriptor" class="sidebar-link">7.拦截行为 getOwnPropertyDescriptor</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#_8-setprototypeof" class="sidebar-link">8.setPrototypeOf</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#_9-取消代理" class="sidebar-link">9.取消代理</a></li></ul></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#symbol" class="sidebar-link">Symbol</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#遍历器iterator" class="sidebar-link">遍历器Iterator</a></li></ul></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#generator" class="sidebar-link">Generator</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#generator-2" class="sidebar-link">Generator</a></li></ul></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#promise" class="sidebar-link">promise</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#promise-异步解决方案" class="sidebar-link">promise 异步解决方案</a></li></ul></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#async" class="sidebar-link">Async</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#class-类" class="sidebar-link">class 类</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#super" class="sidebar-link">super</a></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#继承多个父类" class="sidebar-link">继承多个父类</a></li></ul></li><li class="sidebar-sub-header"><a href="/oral/essay/Describe a type of transport you like the most.html#模块module" class="sidebar-link">模块module</a></li></ul></li><li><a href="/oral/essay/What do you do to keep yourself healthy.html" class="sidebar-link">What do you do to keep yourself healthy</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="es6"><a href="#es6" class="header-anchor">#</a> ES6</h1> <h2 id="变量"><a href="#变量" class="header-anchor">#</a> 变量：</h2> <h3 id="_1-let声明"><a href="#_1-let声明" class="header-anchor">#</a> 1.let声明</h3> <div class="language- extra-class"><pre><code>    类似于var  但是变量只在代码块内有效{}
    {
    	var x=10；
    	let y=10；
    }
    console.log（y）会保存
let不存在变量提升
暂时性死区
es6中如果块中存在let和count命令，这个区块对这些命令声明的变量从一开始开始就形成了封闭的作用域
凡是在声明之前就使用这些变量就会报错；
let 不允许重复声明  var 可以重复声明
不能这样使用：
先用var 在用let
先用let再用var   
两个let
块级作用域 只对let声明生效；
{
	{let a=3;}
	{let a=4;}
	}

函数声明类似于var， 即会提升到全局作用域或函数作用域头部
同时  函数声明还会提升到所在的块级作用域的头部  返回结果为undefined

避免在块级作用域内声明函数  优先使用函数表达式
 优先：let fun=function(){}
块级作用域必须有{}
</code></pre></div><h3 id="const"><a href="#const" class="header-anchor">#</a> const</h3> <div class="language- extra-class"><pre><code>const声明的变量为常量  只读 不能更改
const声明变量时立即赋值
const作用域与let相同 只在块级作用域有效
不存在变量提升
不能重复声明
const保证的是值和引用地址不得更改
const FOO=Object.freeze（{a:1,b:2});
冻结对象本身  不能添加属性 不能修改属性的值类型
冻结数组本身，不能添加元素，不能修改元素的值类型
Foo.a=3；
常规模式不起作用
严格模式 该行会报错	
	Object.keys(obj)//返回一个数组 由obj的所有属性或obj的所有索引组成  对象-》属性   数组-》索引
	
let声明的对象不再作为window的属性
let a=1；
window.a  //undefined
数组解构赋值
按一定的模式从数组或对象中提取值为变量赋值，称为结构
模式匹配 等号两边模式相同，一一对应  没有则返回undefined
部分匹配 左边变量少于右边变量的数量
右边不是数组则报错
默认值 let（x,y=10) 严格模式等于undefined
{
	let[a,b]=[1,2];
	a的值为1   b的值为2
	
}
表达式惰性求值 需要赋值时才运行表达式

对象解构赋值
对象解构赋值通过属性名
let{a,b,c}={a:1,b:2,c:3}
let{a：a,b:b,c:c}={a:1,b:2,c:3} 模式和变量
对象的解构赋值的内部机制 是先找到同名属性，然后再赋给对应的变量
真正被赋值的是变量 不是模式
变量名与属性名不一致时
let{a:f,b:k,c:z}={a:1,b:2,c:3}

perfermance.now 更精确的时间  打开浏览器 并运行浏览器的事件

函数返回值
数字和布尔值解构 先转成对象
</code></pre></div><h2 id="模板字符串"><a href="#模板字符串" class="header-anchor">#</a> 模板字符串</h2> <div class="language- extra-class"><pre><code>反引号``，
</code></pre></div><h2 id="字符串实例方法"><a href="#字符串实例方法" class="header-anchor">#</a> 字符串实例方法</h2> <div class="language- extra-class"><pre><code>str.includes('s') 有没有s   返回true/false
str.stratsWidth('s')是不是在开头
str.endsWidth('s') 是不是在结尾
第二个参数 数字
includes('s',num);stratsWidth('s',num)//从索引到最后
endsWidth('s',num) 前num个字符
includes('s',3)；索引3开始到最后有没有s存在
endsWidth('s',3) 索引33个字符是不是以s结尾
str.repeat(n) 重复次数 生成字符串 n不是数字会被转成数字 
n&lt;=-1报错 -1&lt;n&lt;0，n=NaN时  n看做是n=0，返回空字符串
str.padStart(n.'x');从前面补全字符串，生成新字符串
str.padEnd(n,'y');从最后补全字符串
n补全之后的长度  x要补的字符串  重复出现
n=str长度   返回str
重复次数超过n，截取后面的多余字符
原字符串的长度，等于或大于最大长度，则字符串补全不生效，返回原字符串。
用来补全的字符串与原字符串，两者的长度之和超过了最大长度，则会截去超出位数的补全字符串。
如果省略第二个参数，默认使用空格补全长度。
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x   '

trim()一致，trimStart()消除字符串头部的空白，trimEnd()消除尾部的空白。
它们返回的都是新字符串，不会修改原始字符串。
这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。
</code></pre></div><h2 id="数字方法"><a href="#数字方法" class="header-anchor">#</a> 数字方法</h2> <div class="language- extra-class"><pre><code>Number.isFinite(num)用来检查一个数值是否为有限的 只对数字有效   其他类型返回false
Number.isNaN() 只对数字有效
Number.parseInt()
Number.parseFloat()
Number.parseInt()===parseFloat()
Number.isInteger()判断是不是整数
Number.isSafeInteger() 是否为安全整数
Number.MAX_SAFE_INTEGER() 是否为最大安全整数
BIGInt 大整数 新数据类型
let a=12345n；
let b=12345；
a不等于b
typeof a  bigint

+1n报错   1.12n报错
BIGInt(x) x为小数报错  x为NaN报错

boolean string number 可以将大整数转换
运算与number一直  除法运算舍弃小数 10n/3n=3n
&quot;&quot;+35n=&quot;35&quot;

Math.trunc方法用于去除一个数的小数部分，返回整数部分。非数值类型转换成数值 转换不了NaN
Math.sign方法用来判断一个数到底是正数、负数、还是零。对于非数值，会先将其转换为数值。
参数为正数，返回+1；
参数为负数，返回-1；
参数为 0，返回0；
参数为-0，返回-0;
其他值，返回NaN。
Math.imul(a,b) a*b
Math.imul(2, 4)   // 8
Math.imul(-1, 8)  // -8
Math.imul(-2, -2) // 4
Math.cbrt()方法用于计算一个数的立方根。
Math.clz32()方法将参数转为 32 位无符号整数的形式，然后返回这个 32 位值里面有多少个前导 0。
2**3 2的立方
a**b=Math.pow(a,b)
a**b**c==a**(b**c)
Math.hypot方法返回所有参数的平方和的平方根。
Math.hypot(3, 4);        // 5    3*3+4*4=5*5 所以返回5
</code></pre></div><h2 id="数组的扩展"><a href="#数组的扩展" class="header-anchor">#</a> 数组的扩展</h2> <div class="language- extra-class"><pre><code>扩张运算符... 将数组转换成逗号分隔的序列
Math.max(...[1,2,3])
let arr=[1,2]
var copyArr=[...arr]

let arr1=[1,2]  arr2=[3,4,5]
let arr=[...arr1,...arr2]
const[first,...tesr]=[1,2,3,4,5]
let btnArr=[...document.querySelectorAll(&quot;.btn&quot;)]
Array.from()将类似数组的对象转换为数组
只要是部署了iterator接口的数据结构  Array.from都能将其转为数组
string  array  arguments Nodelist  HTMLCollect  Set Map等
let children=ul.children
Array.from(children)
第二个参数 回调函数  对数组元素进行处理  将处理之后的值放到返回的数组里边
var res=Array.from(arguments,function(arg{
	return arg/arg
}))
与...的区别   都是能转换具有Herato接口的数据为数组r
{length}  ...不能转换
arr.map（function（）{}）
返回新数组 可以对每一项进行修改
arr.forEach(function(){})
arr.fill(x)用x填充数组，已有元素会被覆盖
arr.fill(x,start,end)//起始位置    结束位置(不含）
x是引用类型 填的是指向

Array.of()转化成数组
Array.of（1，2，3）==[1,2,3]
[].slice.call(arguments)

arr.copyWithin(目标索引，开始索引，结束索引)
从开始索引到结束索引，复制数组元素，从目标元素索引开始，不包含结束索引
负数为倒数
</code></pre></div><p>[1,2,3,4,5].copyWithin(0,3)  [4,5,3,4,5]</p> <p>arr.find()//返回第一个符合条件的结果  没有则返回undefined
arr.findIndex() 返回第一个符合条件的索引，没有则返回-1
indexOf() 不能查找NaN</p> <p>entries()  keys() values()
返回数组  遍历器对象   可以for of遍历
arr.keys()键
values()值
entries()键值对
empty  什么都没有  不是undefined，不是null
forEach，some，every，reduce，filter跳过空元素
map跳过但保留空元素
join，toString将空元素视为undefined  undefined和null视为空字符串
arr.from  将空元素视为undefined
copyWithin拷贝空元素
for...of将空视为undefined
fill将空视为正常
keys calues entries  find findIndex 将空元素视为undefined</p> <h2 id="对象的扩展"><a href="#对象的扩展" class="header-anchor">#</a> 对象的扩展</h2> <p>{a：a,b:b}==={a,b}
方法简洁表示法
{a:a,b:b,say:function(){}}==={a,b,say(){}}
对象方法做构造函数时不能简写
let obj={
fn(){
this.x=100;
}
}
new obj.fn()报错
obj.a=10//标志符
obj['a']=10 //方括号  设置属性与obj.xy一样
['xy'];1
['a'+'b']:1 //obj.ab=1一样</p> <h4 id="可枚举-enumerable"><a href="#可枚举-enumerable" class="header-anchor">#</a> 可枚举 enumerable</h4> <div class="language- extra-class"><pre><code>对象的每个属性都有个可描述的对象：Object.getOwnPropertyDescriptor（obj，'xy'）
Object.getOwnPropertyDescriptors(obj)方法  返回指定对象所有自身属性的描述对象
enumberable为false则不可以被for  in遍历

for...in循环：只遍历对象自身的和继承的可枚举的属性。
Object.keys()：返回对象自身的所有可枚举的属性的键名。
JSON.stringify()：只串行化对象自身的可枚举的属性。
Object.assign()： 忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性。

let obj={}；
//数据劫持
 Object.definePrototype(obj,'msg',{
 	value:120,//默认值为undefined
 	writable：true，默认为false 不可修改
 	enumerable：true 默认为true 可枚举的
 	configurable：true 默认为flase  不能删除的	
 }) 
 Object.assign()
 
for...in循环：只遍历对象自身的和继承的可枚举的属性。
Object.keys()：返回对象自身的所有可枚举的属性的键名。
Object.getOwnPropertyNames(obj)数组 包含自身所有属性和自身不可枚举属性的键名
Object.getOwnPropertySymbols(obj)数组 包含对象自身所有的Symbol属性的键名
Reflect.ownKeys(obj) 返回一个数组 包含对象自身所有键（不含继承的）名是symbol
</code></pre></div><p>或字符串  也不管是否可枚举</p> <div class="language- extra-class"><pre><code>首先遍历所有的数值键 按照数值升序排列
遍历所有的字符串键，按照加入时间升序排列
最后遍历symbol键，按照加入时间升序排列
</code></pre></div><h4 id="object"><a href="#object" class="header-anchor">#</a> Object</h4> <div class="language- extra-class"><pre><code>super 指向当前对象的原型对象(访问构造函数原型)，只能在对象方法里使用
obj.__proto__ 读取或设置obj的原型对象
let obj=Object.create（xy） 生成obj的原型对象xy
Object.setPrototypeOf（obj，mn）设置对象的原型对象
Object.getPrototypeOf（obj）获取对象的原型对象
</code></pre></div><h4 id="object-扩展运算符-的解构赋值"><a href="#object-扩展运算符-的解构赋值" class="header-anchor">#</a> Object 扩展运算符 ...的解构赋值</h4> <div class="language- extra-class"><pre><code>将对象可遍历但没分配的属性拷贝过来
let{a,b,...c}={a:1,b:2,m=3,n=4}
c={m=3,n=4}
...只能放在最后一个参数
...后边不是对象时强制转换成对象
...后边是字符串时，转成类数组
</code></pre></div><h4 id="的拷贝"><a href="#的拷贝" class="header-anchor">#</a> ...的拷贝</h4> <div class="language- extra-class"><pre><code>let x={a:1,b:2}
let y={c:3,d:4}
let obj={...x}   == let obj=Object.assign({},x)
只拿到了自身的属性，获取自身和原型的属性
let obj={
	__proto__:Object.getPrototypeOf(x),
	...x
}
继承__proto__的属性
链判断运算符？.
链式调用时判断，如果是null或者undefined 直接返回undefined
a?.b
m?.[1]
xiaoming.say?.()
短路
delete
报错
括号
carObj?.x?.y?.color

null判断 ??
类似|| 设定默认值
如果是null或undefined才生效
let title=a?.b?.title??&quot;NULL判断&quot;
与&amp;&amp;或||一起用必须()

let obj={a:1,b:2}
for(let k of Object.keys(obj)){
	console.log(k)
}
</code></pre></div><h3 id="es6设置默认值"><a href="#es6设置默认值" class="header-anchor">#</a> ES6设置默认值</h3> <p>函数参数默认值function say(a=100){}默认值严格等于===undefined才生效
函数里不能再次用let或const声明同名变量
参数名不能重复
参数默认值不影响arguments
参数值默认
function abc({a,b=10){
console.log(a,b)
}
abc()//报错  不能解构
abc({}) //undefined  10
有默认值时  参数如果不是最后一个参数  调用时不可省略
function abc(a,b=5,c)
{}
长度length的子算方式 第一个有默认值的参数，不含之前的参数，长度为1</p> <p>rest参数用...abc形式 表示剩余参数 abc为数组
代替了arguments
rest不算入长度
rest必须放在最后</p> <p>用var 声明的变量不能用delete删除</p> <h2 id="箭头函数"><a href="#箭头函数" class="header-anchor">#</a> 箭头函数</h2> <p>let fn=x=&gt;x===let fn=function(x){return x}
1个参数可不加括号  无参数或多个参数需要加括号
函数体说明 如果要return 无大括号可不写return
单执行代码可省略大括号
返回形式 必须放（）里
特点
无arguments对象 用rest代替
this是创建不是调用时，箭头函数的this指向外层代码块，不能做构造函数</p> <p>set类数组
let s=new Set（数组，字符串，对象，arguments等）</p> <p>交集  并集  差集
let x=new Set([1,2,3,4,5]),y=new Set([2,3,4,5,6])
交集：
let a=[...x].filter(v=&gt;[...y].includes(v))
并集：
let b=new Set([...x,...y]);
差集：
let c=[...x].filter(v=&gt;[...y].！includes(v))</p> <h2 id="proxy-代理"><a href="#proxy-代理" class="header-anchor">#</a> Proxy 代理</h2> <p>proxy 用于修改某些操作的默认行为，可以理解成，在目标对象前假设一层拦截，当外界对象访问该属性时，必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行修改和过滤，</p> <h3 id="_1-拦截行为-get"><a href="#_1-拦截行为-get" class="header-anchor">#</a> 1.拦截行为 get</h3> <div class="language- extra-class"><pre><code>get(target,prop,proxy){
	return 处理值
}
let proxy=new Proxy({},{
	get(target,prop){
		return 100;
	}
})
proxy.xyz；//100
拦截属性读取
target 拦截目标
prop 属性
proxy 代理器对象 proxy.getReceiver
configurable：false并且writable：false报错
检测属性存不存在  if（prop in target）   if（Reflect.has（target，prop）
</code></pre></div><h3 id="_2-set方法-拦截某个属性的赋值操作"><a href="#_2-set方法-拦截某个属性的赋值操作" class="header-anchor">#</a> 2. set方法  拦截某个属性的赋值操作</h3> <div class="language- extra-class"><pre><code>假设一个person有一个age属性，该属性应该是一个不大于200的整数，用proxy保证age的值符合要求
set(target,prop,value,proxy){
	target[prop]=value;
}
let obj={a:1,b:2}
let proxy=new Proxy(obj,{
	set(target,prop,value,proxy){
		target[prop]=value;
	}
})
value 要修改的值
configurable：false并且 writable：false 修改无效
</code></pre></div><h3 id="_3-拦截行为apply-目标函数-this-目标函数的实参列表"><a href="#_3-拦截行为apply-目标函数-this-目标函数的实参列表" class="header-anchor">#</a> 3.拦截行为apply(目标函数，this，目标函数的实参列表){</h3> <div class="language- extra-class"><pre><code>	return Reflect.apply（...arguments）
}
拦截函数调用 apply  call  bind()
this 目标函数中的this
Reflect.apply（...arguments）===Reflect.apply（目标函数，this，目标函数的实参列表）
apply方法拦截函数的调用、 call 和 apply 操作
</code></pre></div><h3 id="_4-has拦截hasproperty操作-检测以-开头的属性"><a href="#_4-has拦截hasproperty操作-检测以-开头的属性" class="header-anchor">#</a> 4.has拦截HasProperty操作,检测以_开头的属性</h3> <div class="language- extra-class"><pre><code>has(target,prop){
	return prop in target
}
拦截 in 
Reflect.has(target,prop)
let obj={a:1,b:2};
let proxy=new Proxy(obj,{
	has(target,prop){
		return prop in target;
	}
})
a in prop  //true
</code></pre></div><h3 id="_5-拦截行为-defineproperty"><a href="#_5-拦截行为-defineproperty" class="header-anchor">#</a> 5.拦截行为 defineProperty</h3> <div class="language- extra-class"><pre><code>defineProperty（target，prop，descriptor）{
	return；
}
拦截Object.defineProperty，让属性不可写，不能添加新属性
禁止动态设置dom元素和css样式
</code></pre></div><h3 id="_6-拦截行为-deleteproperty-t-p"><a href="#_6-拦截行为-deleteproperty-t-p" class="header-anchor">#</a> 6.拦截行为 deleteProperty（t，p）{</h3> <div class="language- extra-class"><pre><code>	return false；
}
拦截delete 返回false为属性不可删除
</code></pre></div><h3 id="_7-拦截行为-getownpropertydescriptor"><a href="#_7-拦截行为-getownpropertydescriptor" class="header-anchor">#</a> 7.拦截行为 getOwnPropertyDescriptor</h3> <div class="language- extra-class"><pre><code>getOwnPropertyDescriptor（t,p){
	return
}
拦截getOwnPropertyDescriptor 返回为不能获取的一个属性对象或者undefined
</code></pre></div><h3 id="_8-setprototypeof"><a href="#_8-setprototypeof" class="header-anchor">#</a> 8.setPrototypeOf</h3> <div class="language- extra-class"><pre><code>拦截Object（或Reflect）.setPrototypeOf() 设置原型对象（__proto__)
return false 为不接设置  （Reflect）或报错（Object）
</code></pre></div><h3 id="_9-取消代理"><a href="#_9-取消代理" class="header-anchor">#</a> 9.取消代理</h3> <div class="language- extra-class"><pre><code>Proxy.revoclable（object，handler）
返回一个可取消的proxy实例   解构赋值：{proxy.recoke（）{} }
</code></pre></div><h2 id="symbol"><a href="#symbol" class="header-anchor">#</a> Symbol</h2> <div class="language- extra-class"><pre><code>原始数据类型  表示独一无二的值
let s=Symbol()  没有new 不是对象 类似于字符串
let s=Symbol('js') 参数只是描述，用于不同Symbol之间的区分 ，获取这个参数的描述     s.description
typeOf Symbol   ---symbol
Symbol可以转换字符串和布尔值
let s=Symbol()
let t=Symbol()
s==t  //false

做对象属性
Symbol做对象的属性不能用访问
Symbol设置属性属性时要用[]

遍历Symbol属性
Object.getOwnPropertySymbols(obj) 获取对象的所有Symbol属性
Reflect.ownKeys(obj) 获取对象自身属性(不限枚举,不限symbol)

Symbol.for()生成新的Symbol，可搜索  for 登记
使用Symbol.for(参数)先检查有没有相同的参数的Symbol 有则返回  没有则创建新的Symbol
let s=Symbol.for('js')
let t=Symbol.for('js')
s===t
Symbol.for()===Symbol.for()
Symbol.keyFor(s)//返回登记的Symbol的key(参数)
Symbol()!=Symbol()
</code></pre></div><h3 id="遍历器iterator"><a href="#遍历器iterator" class="header-anchor">#</a> 遍历器Iterator</h3> <div class="language- extra-class"><pre><code>指的是一个接口，为不同的数据提供一种统一的访问机制，任何部署可iterator接口的数据
就可以用for...of 遍历
执行过程
创建只针对象，指向数据的起始位置
第一次调用next时，指向第一个成员
第二次使用next时，指向第二个成员 
一直到数据结束位置

next()返回成员信息
value   done
done：false 
done：true

symbol.iterator属性
默认的iterator接口部署在Symbol.iterator属性上  Symbol.iterator是遍历器的生成函数，执行这个函数就会返回一个遍历器
Symbol.iterator是表达式，返回Symbol对象的iterator属性（类型Symbol），所以要用[]设置或访问

原生数据具有iterator属性
数组 字符串  map  set NodeList类数组等
let str='js';
let iterator=str[Symbol.iterator]()
iterator.next()

obj[Symbol.iterator]=function(){
}
[...obj]

NodeList和HTMLCollection的iterator接口
NodeList.prototype[Symbol.iterator]=Array.prototype[Symbol.iterator]
HTMLCollection.prototype[Symbol.iterator]=[][Symbol.iterator]

用遍历器的场合
数组解构赋值    let[x,y]=[1,2]
set解构赋值 let[a,b]=new Set([1,2])
扩展运算符 [...arr]
yield*产出  其实就是for...of


for...of
Array.from()
Map(),Set(),WeakMap(),WeakSet()
promise.all()
promise.race()
</code></pre></div><h2 id="generator"><a href="#generator" class="header-anchor">#</a> Generator</h2> <div class="language- extra-class"><pre><code>函数是一个状态机，封装了多个内部状态，遍历属性生成函数，执行Generator函数会返回一个遍历对象
</code></pre></div><p>也就是说，Generator函数时一个遍历器对象生成函数，返回的遍历器对象，可以一次遍历Generator内部的
一个状态 （yield）*
function* abc(){
yield 123;
yield 456;
yield 789;
}
3个状态 function关键字与函数名之间有一个星号；函数体内部使用yield表达式，定义不同的内部状态
yield //生产  //放弃 两次含义      暂停的意思
调用generator函数不会触发return，二是生成指针对象（iterator）
每次调用next，遇到下一个yield或return
yield暂停执行  next恢复执行
value值时yield的值
调用Generator函数，返回一个遍历器对象，代表Generator函数的内部指针 每次调用遍历器对象的next方法
就会返回一个有着value和done两个属性的对象 ，value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值，done属性是一个布尔值  表示是否遍历结束</p> <div class="language- extra-class"><pre><code>next执行过程
</code></pre></div><p>（1）遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，
作为返回的对象的value属性值。
（2）下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
（3）如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，
并将return语句后面的表达式的值，作为返回的对象的value属性值。
（4）如果该函数没有return语句，则返回的对象的value属性值为undefined。
需要注意的是，yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行
，因此等于为 JavaScript 提供了手动的“惰性求值”（Lazy Evaluation）的语法功能。</p> <p>注意事项
没有yield时，暂缓执行(调用next)
yield只能在generator函数里
yield没返回值  为undefined
next参数值为上一个yield的返回值</p> <p>function* abc(){
let b=40+yield a+100;
let c=yield b/5;
return yield a<em>b</em>c;
}
for...of方法可以自动遍历generator函数运行时产生的iterator对象，且此时不需要调用next方法
一旦next方法返回的结果done为true，for...of方法就会终止，不再往下执行，所以return的结果不会再
for of遍历结果中出现
yield* 后边可以跟函数</p> <h3 id="generator-2"><a href="#generator-2" class="header-anchor">#</a> Generator</h3> <div class="language- extra-class"><pre><code>调用generator函数生成iterator对象  for of可以遍历所有的yield值

普通对象设置iterator接口
function* a(obj){
	let keys=Object.keys(obj);  包含键名的数组
	for(let key of keys){
		yield [k,obj[k]]；提供一个接口
	}
}
扩展运算符 Array.from都可以将generator返回iterator做参数

generator函数嵌套
yield*
function* a(){
	yield 1;
	yield 2;
}
function* b(){
	yield 3;
	yield* a();//for...of遍历a
	yielf 4；
}

generator做对象属性
let obj={
	say:function* (){}
}
let obj={
	* say(){}
}
generator作用 异步同步化  增加iterator接口    解决回调地狱 
ajax异步  异步用同步化表示
</code></pre></div><h2 id="promise"><a href="#promise" class="header-anchor">#</a> promise</h2> <div class="language- extra-class"><pre><code>ajax('1.txt').then(()=&gt;{return ajax('2.txt')}).then()
generator 异步问题同步显示
function abc(){
	let a=ajax('1.txt')
	let b=ajax(a+'.txt')
	let c=ajax(b+'.txt')
	console.log(c)
}
generator两个作用  解决回调    为没有iterator接口的函数提供接口
</code></pre></div><h3 id="promise-异步解决方案"><a href="#promise-异步解决方案" class="header-anchor">#</a> promise 异步解决方案</h3> <div class="language- extra-class"><pre><code>保存着未来才会执行的事件结果
特点：
1.状态不受外界影响 3个状态 pending进行  fulfilled成功  rejected拒绝/已失败
  只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态
2.状态改变：pengding=&gt;fulfilled   pending=&gt;rejected 发生就不会在改变   resolved（已定型）
resolved指fulfilled

基本用法：
let promise=new Promise((resolve,rejected)=&gt;{
	if(异步操作成功){
		resolve（value）//pending-》resolved
		完成到成功，异步操作成功调用，将值（value）做参数传递出去
	}else{
		rejected（error）//pending-》rejected 未完成到失败，将异步操作的错误将参数传递出去
	}
})
promise的then
promise对象的then方法分别指定resolved和rejected回调函数
promise.then（function（value）{
	//成功的操作
}，function（error）{
	//失败的操作
}）
setTimeout第三个参数 给第一个参数传参
function abc(ms){
	return new Promise((resolve,reject)=&gt;{
		setTimeout(resolve,ms,'aaa')
	})
}
abc(1000).then(value=&gt;console.log(value))

Promise立即执行  
实例中直接调用resolve或reject方法
function abc(){
	return new Promise((resolve,reject)=&gt;{
		console.log(3);
		resolve()
	})
}
abc().then(function(){
	console.log(1)
})
console.log(2)
promise本身不是异步   异步存在于then即resolve和reject的回调函数

promise嵌套 一个resolve用另一个promise对象做参数

return resolv和reject不中断后面语句的执行,如需阻止，return rv()

.then 后边接受两个回调函数resolve 和reject
then里的resolve返回结果 作为下一个then 的resolve参数（链式调用）
.then(()=&gt;1).then((x)=&gt;x)  x----1
catch  接受错误（promise错误，throw Error  ，then错误）
catch 接收前面的所有错误，不接收后面的错误，无错误则跳过
不推荐reject  推荐catch   .then()成功  .catch()失败
catch()相当于 .then(null,function(){})
finally 通常放在链式调用最后边，无论正确与否都执行
finally(()=&gt;console.log('close'))


Promise.all将多个promise实例包装成新的promise实例
promise.all方法不一定非是数组，但必须有interator接口，且返回的每一项都是promise实例
只要其中有一项被rejected，总的函数就会变成rejected
参数具有iterator接口的数据
如果不是Promise实例，先执行Promise.resolve（）返回promise对象，
转成resolve状态，promise.all([p1,p2,p3]).then().catch()
全真则真（resolve） 一假（reject）则假
全真则将p1，p2，p3的resolved状态的返回值生成数组在promise.then中返回
一假则将第一个reject返回值给catch
reject里有自己的catch，不会触发promise.all的catch，但是自己的catch执行完之后返回的状态为
resolved状态，变成真

promise.race将多个promise实例包装成一个新的promise实例
如果不是promise实例，就会调用promise.resolve()方法，将参数转成promise实例再进一步处理
找到最快的a 找到之后不再执行
如果a是rejected 但是有catch  执行完catch之后状态变为undefined，则catch中的返回值传给
promise.then如果a没有catch，将返回值传给promise.catch

promise.allSettled()
所有的promise都完成（不限成功失败）
最耗时的请求执行完才出结果
Promise.allSettled([a,b,c]).then(v=&gt;console.log(v))
v数组，元素为

promise.any接受将一组promise实例作为参数，包装成一个新的promise返回，只要实例中
有一个变成fulfilled，包装实例就会变成fulfilled状态，如果所有参数实例变成rejected，包装实例
就会变成rejected  返回最快的resolved
</code></pre></div><p>promise.resolve 把不是promise对象的转为promise对象
参数是一个promise实例，直接返回
参数是一个thenable对象  立即执行then方法
参数不是具有then方法的对象，或根本就不是对象  返会新的promise 状态为resolved 值为        				resolve参数
不带任何参数  状态为resolve的promise</p> <div class="language- extra-class"><pre><code>promise.reject
返回一个新的promise实例，该实例的状态为rejected
</code></pre></div><h2 id="async"><a href="#async" class="header-anchor">#</a> Async</h2> <div class="language- extra-class"><pre><code>async  异步编程解决方案  函数体内有异步进程  但是同步完成
generator的语法糖
function tm（ms）{
	return new Promise（rv=&gt;setTimeout(rv,ms))
	.then(()=&gt;console.log(&quot;执行&quot;))
}
async function abc（ms）{
	await tm(ms)
}
abc(2000)

async function abc(){
	await xy();
	console.log(1)
}
async声明abc函数里有异步进程
await 后面的函数返回值必须是promise对象，await后的函数执行完毕才继续下面的
async 函数顺序执行   无需next()

async function abc(){}
let xy=async function(){}
let obj={
	async say(){}
}
class{
	saync say(){}
}
返回值
async函数返回一个promise对象
return值作为then中resolve 的参数
async函数体内抛出的错误，会被catch方法获取
async函数中的返回值：
所有的await执行完才会执行then
await后边如果不是promise对象 直接返回
是thenable对象  当promise处理
await 不能用在普通函数之中

例：await实现休眠  类似php的sleep方法

错误
await后面rejected状态  参数会被async函数的catch获取
reject中断执行，防止中断执行可以使用try catch
或将reject后增加catch方法
多个没有依赖的await可以放在一起 await Promise.all([a(),b()])
</code></pre></div><h2 id="class-类"><a href="#class-类" class="header-anchor">#</a> class 类</h2> <div class="language- extra-class"><pre><code>class是css面向对象的语法糖  更像面向对象
class Student{
	constructor(name,age){//构造函数
		this.name=name;
		this.age=age;
	}
	say(){//原型方法
		console.log(this.name,this.age)
	}
}
不用，分隔
验证class
typeof Student
Student.prototype.constructor 是构造函数本身

类是function
类的构造函数为class
类的所有方法都定义在class里，实际上都在prototype上
类的所有方法不能枚举

类中必须有constructor 如果没有 默认添加空的constructor
传参在constructor里边传  不能在外边传参

类的实例
必须用new生成实例
自身属性和方法放在this上，原型方法放在class中
为原型添加方法

属性拦截
class中用set和get对读取值和设置值进行拦截
get 属性(){}
set 属性 (值){}
get和set存在于discriptor

表达式
属性名可以用变量表示
[变量名](){}
类名用变量时 如果自身类名没用到，可省略

注意点：
类中默认为严格模式
不存在变量提升
方法名前加*表示generator方法

this
类中的方法如果在外部调用，this为undefined
解决办法
构造函数中用箭头函数定义方法
构造函数中用bind改变this指向

静态属性和方法
只能通过类访问
class外边设置
static say(){}


静态属性只能通过函数访问
Array.isArray()  静态属性方法
typeof s==='string'?true:false;
Object.defineProperty(String,'isString',{  属性劫持
	value(s){
		return typeof s==='string'?true:false;
	}
})

私有属性和方法
只能在类内部访问 用于封装
function Private_abc(){}
#say(){}
封装原则 无法获取到类中的属性和方法 外部不能改写 可以通过get set暴露出的接口获取和设置
不能用声明的 声明属性  比如let /var/ const声明的变量作为私有属性，或报错

类的调用方式：
new.target 返回类的调用方式，如果是new生成实例  new.target值为构造函数，否则为   undefined 只能在函数内使用
禁止类直接调用(ES5)
禁止类实例化

类的继承
ES6用关键字extends实现继承 class B extends A{}
B继承A的所有属性和方法

B中可以没有constructor 但constructor内不能为空
构造函数中的super() 是A的构造函数 目的是新建父类的this对象
super之后才能用this
super=A.prototype.constructor.call（this）
super只能用在子类构造函数中
</code></pre></div><h3 id="super"><a href="#super" class="header-anchor">#</a> super</h3> <div class="language- extra-class"><pre><code>普通函数里指父类的原型
静态函数里 指父类(获取父类的静态属性和方法)
放在函数里指父类

prototype和__proto__
子类的proto指向父类  表示构造函数继承
子类的prototype.__proto__指向父类的prototype  表示方法继承
```
xiaoming.instanceof A  
Student.prototype.isPrototypeOf(xiaoming) 检测是不是在父类原型链上
Boolean String Number Array Date Function  RegExp  Error Object
class B extends Array{
	constructor(...arg){
		super(...arg)
		this.arr=arg
	}
	sum(){
		return this.arr.reduce(function(a,b){
			return a+b
		},0)
	}
}
let n=new B(1,2,3,4,5);
```
</code></pre></div><h3 id="继承多个父类"><a href="#继承多个父类" class="header-anchor">#</a> 继承多个父类</h3> <div class="language- extra-class"><pre><code>Mixin：混入
Mixin 指的是多个对象合成一个新的对象，新对象具有各个组成成员的接口。它的最简单实现如下。
</code></pre></div><h2 id="模块module"><a href="#模块module" class="header-anchor">#</a> 模块module</h2> <p>//按需加载<br>
异步 ADM require('...')
异步 CMD SeaJs
CommonJS
ES6模块  静态化
编译时加载
import{a,b,c} from '/1.js'
只加载了a，b，c三个方法  在编译时完成加载  提高效率
ES6模块分导入import    导出export
创建一个js</p> <div class="language- extra-class"><pre><code>import{a,b,c,d}from './1' 
可以省略js
./当前目录   ../上一级   /根目录
不能跨域

导出用{}，导入对应{} 不要求顺序
可以在文件末尾批量export
export{a,b,c,D}
对应导入import{a,b,c,D} from

也可以用export{a,b,c,D as d}D的名字作为d
对应导入import{a,b,c,d} from

全部导出 export *
全部导入 import * as obj from
obj.a将export全部导出看作对象

默认导出export default x  x可以是已经定义的变量或者值
对应导入 import in prom 无须加{} 可以用任意变量 仅限一个导出结果时

import {a} from './1'
export {a}
等于 export  {a} from &quot;./1&quot;
次写法a没有导入模块  只是做了一次转发  所以当前模块不可用

接口改名 export {a as abc} from...
全部输出 export * from...
默认接口 export {default} from ...

具名改默认 export {abc as default} from
等于 import {abc} from ...       export default  abc；

默认改具名 export {default as xy} from...
等于 import {xy} from...   export default xy
export *as abc from
等于import * as abc from...
export{abc}

import()动态加载模块
if(){
	import {a} from ...
}//报错

import{'./1'} 参数位置路径  不能跨域 与import语句语法一致
import()返回一个promise对象 作为then参数  这个参数可以调用export后边的变量来
获取数据（export后的变量相当于对象属性）
export不能用*
export default a，在then中可以通过参数的default属性获取

顶层this 值为undefined

按需加载
需要发送请求时加载ajax封装函数
多个加载可用promise.all
async函数中可放在await后面	

模块功能主要由两个命令组成：import  export
export规定模块的对外接口
import输出其他模块提供的功能
一个模块就相当于一个文件，该文件内部的变量外部无法获取
 如果想外部能够读取模块内的某个变量，就必须用export输出该变量
 export var name='jin'
 export var sex='男'
另一种写法：
export{name,sex}

function v1(){...}
function v2(){...}
export{
	v1 as streamV1;
	va as streamV2;
}
利用as对两个函数重新命名对外接口
export命令是对外接口  必须与模块内部的变量建立- -对应的关系
export命令只出现在模块的顶层 不能出现在代码块中

import命令加载这个模块
import{name，sex}from '/1.js'
import中的命令都是只读的 不能修改
如果想输出变量重新取一个名字 使用as
如果多次执行一个import属性 则只会执行一次

export default命令
export default a  将变量a 的值赋值给default
</code></pre></div></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/jgsrty/jgsrty.github.docs/edit/master/docs/oral/essay/Describe a type of transport you like the most.md" target="_blank" rel="noopener noreferrer">Edit this page</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">12/23/2020, 4:59:13 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/oral/introduction.html" class="prev">
        伪类
      </a></span> <span class="next"><a href="/oral/essay/What do you do to keep yourself healthy.html">
        What do you do to keep yourself healthy
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.2b0e3d52.js" defer></script><script src="/assets/js/2.87232f21.js" defer></script><script src="/assets/js/83.604f41d2.js" defer></script>
  </body>
</html>
